<template>
    <div class="visual_chart1" id="main9">

    </div>
</template>

<script>
    export default {
        name: "Main9",
        data(){
            return{
                geoCoordMap: {
                    "保定": [115.48, 38.85],
                    "湘潭": [112.91, 27.87],
                    "金华": [119.64, 29.12],
                    "岳阳": [113.09, 29.37],
                    "长沙": [113, 28.21],
                    "衢州": [118.88, 28.97],
                    "廊坊": [116.7, 39.53],
                    "菏泽": [115.480656, 35.23375],
                    "合肥": [117.27, 31.86],
                    "武汉": [114.31, 30.52],
                    "大庆": [125.03, 46.58]
                }
            }
        },
        mounted() {
            this.drawLine()
        },
        methods:{
            drawLine(){
                let main9 = this.$echarts.init(document.getElementById('main9'))
                main9.setOption({
                    title: {
                        text: ' ',
                        sublink: ' ',
                        x:'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.name + ' : ' + params.value[2];
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        y: 'bottom',
                        x:'right',
                        data:['pm2.5'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 200,
                        calculable: true,
                        color: ['#d94e5d','#eac736','#50a3ba'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    geo: {
                        map: 'china',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: 'rgba(127,199,221,0.1)',
                                borderColor: '#0177ff'
                            },
                            emphasis: {
                                areaColor: '#071537'//鼠标指上市时的颜色
                            }
                        }
                    },
                    series: [
                        {
                            name: ' ',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: this.convertData([
                                {name: "保定", value: 153},
                                {name: "湘潭", value: 154},
                                {name: "金华", value: 157},
                                {name: "岳阳", value: 169},
                                {name: "长沙", value: 175},
                                {name: "衢州", value: 177},
                                {name: "廊坊", value: 193},
                                {name: "菏泽", value: 194},
                                {name: "合肥", value: 229},
                                {name: "武汉", value: 273},
                                {name: "大庆", value: 279}
                            ]),
                            symbolSize: 12,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                emphasis: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                }
                            }
                        }
                    ]
                })
            },
            convertData(data){
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = this.$data.geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            }
        }
    }
</script>

<style scoped>

</style>